/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <div class="third-content">
    <Title title="补偿均价"></Title>
    <ul class="main">
      <li>
        <p class="num">{{Math.round(avgPrice.priceofavg)}}<b class="unit">元/㎡</b></p>
        <p class="text">补偿均价</p>
      </li>
      <li>
        <p class="num">{{Math.round(avgPrice.userofavg)}}<b class="unit">元/户</b></p>
        <p class="text">户均价</p>
      </li>
      <!-- <div class="item laowu">
        <i class="iconfont icon-geikehuqian"></i>
        <span class="name">补偿均价</span>
        <span class="num">{{Math.round(avgPrice.priceofavg)}}</span>
        <span class="unit">元/㎡</span>
      </div>
      <div class="item pinggu">
        <i class="iconfont icon-GEO-icon-"></i>
        <span class="name">户均价</span>
        <span class="num">{{Math.round(avgPrice.userofavg)}}</span>
        <span class="unit">元/户</span>
      </div> -->
    </ul>
  </div>
</template>

<script>
import Title from "../Title";

export default {
  props:{
    avgPrice: Object
  },
  data() {
    return {};
  },
  components: {
    Title
  }
};
</script>

<style lang='less' scoped>
@import "../../utils/theme.less";

.third-content {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .main {
    width: 100%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    // .item {
    //   height: 50%;
    //   width: 100%;
    //   padding: 1vw;
    //   font-size: 2.2rem;
    //   display: flex;
    //   align-items: center;
    //   justify-content: center;
    //   i {
    //     font-size: 4.5rem;
    //     margin-right: 1vw;
    //   }
    //   .unit,
    //   .name {
    //     font-size: 1.5rem;
    //     margin-top: 0.5vw;
    //     color: @font-regular;
    //   }
    //   .unit {
    //     margin-left: 0.5vw;
    //   }
    //   .name {
    //     margin-right: 0.5vw;
    //   }
    //   .num {
    //     font-family: "digifacewide";
    //     color: @primary;
    //   }
    // }
    // .laowu {
    //   i {
    //     color: @color1;
    //   }
    // }
    // .pinggu {
    //   i {
    //     color: @color2;
    //   }
    // }
  }
  li{
    flex: 1;
    .num{
      font-size: 2.2rem;
      font-family: "digifacewide";
      padding-bottom: 1rem;
      color: @primary;
      .unit{
        font-size: 1.2rem;
        color: @gray;
      }
    }
    .text{
      font-size: 1.3rem;
    }
  }
}
</style>
